<script setup>
defineProps({
  type: { type: String, default: 'happy' },
});
</script>

<template>
  <svg
    v-if="type == 'happy'"
    class="z-50"
    width="18"
    height="18"
    viewBox="0 0 18 18"
    fill="none"
    xmlns="http://www.w3.org/2000/svg">
    <g clip-path="url(#clip0_522_316)">
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M1.6875 9C1.6875 7.0606 2.45792 5.20064 3.82928 3.82928C5.20064 2.45792 7.0606 1.6875 9 1.6875C10.9394 1.6875 12.7994 2.45792 14.1707 3.82928C15.5421 5.20064 16.3125 7.0606 16.3125 9C16.3125 10.9394 15.5421 12.7994 14.1707 14.1707C12.7994 15.5421 10.9394 16.3125 9 16.3125C7.0606 16.3125 5.20064 15.5421 3.82928 14.1707C2.45792 12.7994 1.6875 10.9394 1.6875 9ZM9 0C6.61305 0 4.32387 0.948212 2.63604 2.63604C0.948212 4.32387 0 6.61305 0 9C0 11.3869 0.948212 13.6761 2.63604 15.364C4.32387 17.0518 6.61305 18 9 18C11.3869 18 13.6761 17.0518 15.364 15.364C17.0518 13.6761 18 11.3869 18 9C18 6.61305 17.0518 4.32387 15.364 2.63604C13.6761 0.948212 11.3869 0 9 0V0ZM5.625 9C5.92337 9 6.20952 8.88147 6.4205 8.6705C6.63147 8.45952 6.75 8.17337 6.75 7.875C6.75 7.57663 6.63147 7.29048 6.4205 7.0795C6.20952 6.86853 5.92337 6.75 5.625 6.75C5.32663 6.75 5.04048 6.86853 4.8295 7.0795C4.61853 7.29048 4.5 7.57663 4.5 7.875C4.5 8.17337 4.61853 8.45952 4.8295 8.6705C5.04048 8.88147 5.32663 9 5.625 9ZM13.5 7.875C13.5 8.17337 13.3815 8.45952 13.1705 8.6705C12.9595 8.88147 12.6734 9 12.375 9C12.0766 9 11.7905 8.88147 11.5795 8.6705C11.3685 8.45952 11.25 8.17337 11.25 7.875C11.25 7.57663 11.3685 7.29048 11.5795 7.0795C11.7905 6.86853 12.0766 6.75 12.375 6.75C12.6734 6.75 12.9595 6.86853 13.1705 7.0795C13.3815 7.29048 13.5 7.57663 13.5 7.875ZM5.985 10.8405C6.16651 10.7134 6.39072 10.6628 6.60922 10.6997C6.82771 10.7365 7.02294 10.8578 7.15275 11.0374L7.16062 11.0475C7.2765 11.1802 7.40813 11.2972 7.55438 11.3962C7.85138 11.5965 8.32275 11.8125 9 11.8125C9.67725 11.8125 10.1475 11.5965 10.4456 11.3951C10.5919 11.2961 10.7235 11.1791 10.8394 11.0464L10.8472 11.0374C10.9115 10.9471 10.9929 10.8704 11.0868 10.8116C11.1808 10.7528 11.2853 10.713 11.3946 10.6947C11.5039 10.6763 11.6157 10.6796 11.7237 10.7044C11.8317 10.7293 11.9337 10.7751 12.024 10.8394C12.1143 10.9036 12.191 10.9851 12.2498 11.079C12.3086 11.1729 12.3483 11.2775 12.3667 11.3867C12.3851 11.496 12.3818 11.6078 12.357 11.7158C12.3321 11.8238 12.2863 11.9259 12.222 12.0161L11.5312 11.5312C12.222 12.015 12.222 12.0161 12.2209 12.0161V12.0173L12.2198 12.0195L12.2175 12.0229L12.2119 12.0308L12.1961 12.0521C12.1329 12.1368 12.0637 12.2169 11.9891 12.2917C11.8091 12.4785 11.6089 12.6473 11.3929 12.7924C10.6841 13.2626 9.85163 13.5101 9 13.5C7.93575 13.5 7.1415 13.1535 6.60825 12.7913C6.30535 12.5856 6.03433 12.3366 5.80387 12.0521L5.78813 12.0296L5.7825 12.0229L5.78025 12.0195V12.0173H5.77913L6.46875 11.5312L5.778 12.015C5.64971 11.8319 5.59933 11.6054 5.63793 11.3852C5.67653 11.1649 5.80095 10.969 5.98387 10.8405H5.985Z"
        fill="#CFCFCF" />
    </g>
    <defs>
      <clipPath id="clip0_522_316">
        <rect width="18" height="18" fill="white" />
      </clipPath>
    </defs>
  </svg>

  <svg
    v-if="type == 'dog'"
    class="icon-sidebar relative inline h-4 w-4"
    style="width: 1em; height: 1em; vertical-align: middle; fill: currentColor; overflow: hidden"
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg">
    <path
      d="M927.3 453c-21.1-55.3-51.7-109.1-88.4-155.5-41.1-51.9-88.3-93.2-140.1-122.6-58.6-33.2-121.3-50.1-186.4-50.1-65.9 0-129.2 16.7-188.1 49.7-52.2 29.2-99.5 70.3-140.7 122-36.7 46.1-67.3 99.7-88.3 154.9-20.3 53.1-31 105.4-31 151.1 0 41.7 9.2 76.8 26.5 101.5 19.6 28 49.4 42.8 86.1 42.8 27.4 0 51-6.6 69.7-18.6 24.1 51.8 75.7 85 132.9 85 17.8 0 34.9-3.2 50.7-9.1v14.1c0 44.1 35.9 80 80 80s80-35.9 80-80v-14.8c16.3 6.3 33.9 9.8 52.3 9.8 57.5 0 109.1-33.6 133-86 18.9 12.6 43 19.5 71.1 19.5 36.4 0 66-14.6 85.4-42.2 17.2-24.4 26.2-59.1 26.2-100.3 0.2-45.5-10.6-97.9-30.9-151.2zM560.2 818.4c0 27.6-22.4 50-50 50s-50-22.4-50-50V789c13.8-9.2 26-20.7 36-33.9v45.8c0 8.3 6.7 15 15 15s15-6.7 15-15v-45.7c9.5 12.6 21 23.6 34 32.5v30.7z m-49.1-167.6h-0.2l-73-40.8 20.8-29.8h104.4l20.8 29.8-72.8 40.8z m396.5 36.6c-13.8 19.6-34.2 29.5-60.9 29.5-26.1 0-47.8-7.2-62.9-20.9-15.7-14.2-23.6-34.7-23.6-60.8 0-57.3-0.4-130.2-0.7-183.5-0.2-34.3-0.4-61.4-0.4-75 0-8.3-6.7-15-15-15s-15 6.7-15 15c0 13.7 0.2 40.8 0.4 75.1 0.3 53.2 0.7 126.2 0.7 183.3 0 28.5 8.1 52.8 22.7 71.4-1.2 1.3-2.2 2.8-2.9 4.5-18.1 43.9-60.3 72.3-107.4 72.3-60.6 0-110.5-47.1-115.9-107l74.1-41.5c6.8-3.8 11.7-10.4 13.5-18 1.7-7.6 0.2-15.6-4.3-22L587 562c-5.2-7.4-13.7-11.8-22.7-11.8H457.6c-9.1 0-17.6 4.4-22.7 11.8l-23 32.9c-4.5 6.4-6 14.4-4.3 22 1.7 7.6 6.6 14.2 13.4 18l74.7 41.9c-5.5 59.7-55.5 106.6-116.2 106.6-47 0-89.2-28.2-107.5-71.8-0.6-1.4-1.4-2.7-2.3-3.8 15.3-18.7 23.7-43.4 23.7-72.6 0-57.2 0.4-130.1 0.7-183.3 0.2-34.3 0.4-61.5 0.4-75.1 0-8.3-6.7-15-15-15s-15 6.7-15 15c0 13.6-0.2 40.7-0.4 75-0.3 53.3-0.7 126.2-0.7 183.5 0 26.1-8 46.6-23.6 60.8-15.1 13.7-36.8 20.9-62.9 20.9-26.9 0-47.6-10.1-61.5-30-13.8-19.6-21-48.8-21-84.3 0-42.2 10-90.7 29-140.5 20-52.4 48.9-103.1 83.8-146.9 38.7-48.7 83.1-87.2 131.9-114.5 54.4-30.5 112.7-45.9 173.4-45.9 59.9 0 117.6 15.5 171.6 46.2 48.5 27.5 92.7 66.2 131.4 115.1 68.7 86.8 113 199.9 113 288.2-0.1 35-7.3 63.7-20.9 83z" />
    <path d="M383.2 480.9m-25 0a25 25 0 1 0 50 0 25 25 0 1 0-50 0Z" />
    <path d="M639.2 480.9m-25 0a25 25 0 1 0 50 0 25 25 0 1 0-50 0Z" />
  </svg>

  <svg
    v-if="type == 'question'"
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg">
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M15.6691 7.06514L14.5891 5.72514C14.4158 5.50263 14.3087 5.23575 14.2801 4.95514L14.0901 3.25714C14.0516 2.91784 13.8993 2.60161 13.6579 2.36005C13.4165 2.1185 13.1004 1.9659 12.7611 1.92714L11.0621 1.73714C10.7621 1.70714 10.5021 1.57814 10.2821 1.40814L8.94414 0.32914C8.67755 0.116069 8.34642 0 8.00514 0C7.66386 0 7.33273 0.116069 7.06614 0.32914L5.72614 1.40914C5.50374 1.58285 5.23686 1.69029 4.95614 1.71914L3.25814 1.90914C2.55814 1.98914 2.00814 2.53914 1.92814 3.23814L1.73814 4.93714C1.70814 5.23714 1.57914 5.49714 1.40914 5.71714L0.32914 7.05414C0.116069 7.32073 0 7.65186 0 7.99314C0 8.33442 0.116069 8.66555 0.32914 8.93214L1.40914 10.2721C1.57914 10.4921 1.68914 10.7521 1.71914 11.0421L1.90914 12.7401C1.98914 13.4401 2.53914 13.9901 3.23814 14.0701L4.93714 14.2601C5.23714 14.2901 5.49714 14.4191 5.71714 14.5891L7.05614 15.6691C7.60614 16.1081 8.38514 16.1081 8.93414 15.6691L10.2741 14.5891C10.4941 14.4191 10.7541 14.3091 11.0441 14.2791L12.7421 14.0891C13.4421 14.0091 13.9921 13.4591 14.0721 12.7601L14.2621 11.0611C14.2921 10.7611 14.4211 10.5011 14.5911 10.2811L15.6711 8.94214C15.8842 8.67555 16.0003 8.34442 16.0003 8.00314C16.0003 7.66186 15.8842 7.33073 15.6711 7.06414L15.6691 7.06514ZM8.99914 11.4991C8.99914 11.7791 8.77914 11.9991 8.49914 11.9991H7.49914C7.22914 11.9991 6.99914 11.7791 6.99914 11.4991V10.4991C6.99914 10.2191 7.22914 9.99914 7.49914 9.99914H8.49914C8.77914 9.99914 8.99914 10.2191 8.99914 10.4991V11.4991ZM10.5591 6.60914C10.4991 6.77914 10.3891 6.93914 10.2591 7.07914C10.1291 7.23914 10.1191 7.26914 9.92914 7.45914C9.76914 7.62914 9.61914 7.75914 9.40914 7.90914C9.29914 7.99914 9.20914 8.09914 9.12914 8.17914C9.04914 8.25914 8.98914 8.34914 8.93914 8.44914C8.88914 8.54914 8.85914 8.63914 8.82914 8.74914C8.79914 8.85914 8.79914 8.87914 8.79914 8.99914H7.12914C7.12914 8.77914 7.12914 8.68914 7.15914 8.51914C7.18914 8.32914 7.23914 8.15914 7.29914 7.99914C7.35914 7.85914 7.43914 7.71914 7.54914 7.57914C7.65914 7.44914 7.77914 7.32914 7.95914 7.19914C8.22914 7.00914 8.31914 6.89914 8.43914 6.67914C8.55914 6.45914 8.63914 6.29914 8.63914 6.08914C8.63914 5.81914 8.57914 5.63914 8.43914 5.50914C8.30914 5.37914 8.12914 5.31914 7.85914 5.31914C7.76914 5.31914 7.66914 5.33914 7.55914 5.36914C7.44914 5.39914 7.38914 5.45914 7.30914 5.52914C7.22914 5.59914 7.16914 5.63914 7.10914 5.72914C7.04555 5.80813 7.01348 5.90789 7.01914 6.00914H5.01914C5.01914 5.62914 5.14914 5.44914 5.28914 5.17914C5.44914 4.90914 5.64914 4.67914 5.89914 4.50914C6.14914 4.33914 6.44914 4.20914 6.77914 4.12914C7.10914 4.04914 7.47914 3.99914 7.86914 3.99914C8.30914 3.99914 8.69914 4.04914 9.03914 4.12914C9.37914 4.21914 9.66914 4.34914 9.91914 4.51914C10.1491 4.68914 10.3291 4.89914 10.4691 5.14914C10.5991 5.39914 10.6591 5.69914 10.6591 6.02914C10.6591 6.24914 10.6591 6.44914 10.5791 6.61914L10.5591 6.60914Z"
      fill="#96A3BD" />
  </svg>
</template>
